<template>
  <el-tabs type="border-card" class="demo-tabs" tab-position="left">
    <el-tab-pane>
      <template #label>
              <span class="custom-tabs-label">
                  <el-icon><ChatDotSquare /></el-icon>
                  <span>聊天</span>
              </span>
      </template>
      <!--双向绑定可以监听-->
      <Conversation :session="sessionVo"/>
    </el-tab-pane>

    <el-tab-pane>
      <template #label>
              <span class="custom-tabs-label">
                  <el-icon><calendar/></el-icon>
                  <span>好友</span>
              </span>
      </template>
      <Friend @clickChild="ent"/>
    </el-tab-pane>

    <el-tab-pane>
      <template #label>
              <span class="custom-tabs-label">
                  <el-icon><calendar/></el-icon>
                  <span>群组</span>
              </span>
      </template>
      <Group @clickChild="ent"/>
    </el-tab-pane>

    <el-tab-pane>
      <template #label>
              <span class="custom-tabs-label">
                  <el-icon><calendar/></el-icon>
                  <span>动态</span>
              </span>
      </template>
      <Dynamic/>
    </el-tab-pane>

    <el-tab-pane>
      <template #label>
              <span class="custom-tabs-label">
                  <el-icon><calendar/></el-icon>
                  <span>个人</span>
              </span>
      </template>
      <Personal/>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import Conversation from "../Conversation/Conversation.vue";
import Friend from "../Friend/Friend.vue";
import {useRouter} from "vue-router";
import {ref} from "vue";
import Personal from "../Personal/Personal.vue";
import Dynamic from "../Dynamic/Dynamic.vue";
import Group from "../Group/Group.vue";

const router = useRouter();

const sessionVo=ref({})

const ent=(val:any)=>{
  sessionVo.value=val;
}

</script>

<style scoped>

.demo-tabs{
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 40px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>